<template>
  <h1 v-text="count" @click="increment"></h1>
  <h1 v-text="count" @click="toAddNum"></h1>
  <h1 v-text="count" @click="toAddCount"></h1>
  <h1 v-text="slogan"></h1>
  <button @click="updateGender(null)">红男绿女</button>
  <button @click="updateGender(1)">精神小伙儿</button>
  <button @click="updateGender(0)">扒蒜老妹儿</button>
  <table align="center">
    <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="person in persons">
      <td v-text="person.name"></td>
      <td v-text="person.gender === 1 ? '精神小伙儿':'扒蒜老妹儿'"></td>
    </tr>
    </tbody>
  </table>
</template>
<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";

export default {
  name: "LhzA",
  // computed: mapState({
  //   count: state => state.count,
  //   slogan: state => state.slogan,
  // }),
  // computed:mapState(['count','slogan']),
  computed: {
    ...mapState(['count', 'slogan']),
    ...mapGetters(['persons']),
  },
  methods: {
    ...mapMutations(['increment', 'addNum', 'addCount', 'changeGender']),
    toAddNum() {
      this.addNum(5);
    },
    toAddCount() {
      this.addCount({
        amount: 5
      });
    },
    updateGender(gender) {
      this.changeGender({
        gender: gender
      });
    },
    ...mapActions(['getProvinces']),
  },
  mounted() {
    this.getProvinces();
  }
}
</script>

<style scoped>

</style>